<template>
    <div>
        <div class="comment-item" v-for="item in commntList" :key="item.id" @click="toArticle(item)">
            <div>
                <div class="top">
                    <div><el-image style="width: 40px; height: 40px" :src="srcToPath(item.avatar)" fit="fit" /></div>
                    <div>{{ item.username }} 回复我的评论：<span>{{ item.comm_content }}</span></div>
                </div>
                <div class="content text2">{{ item.reply_content }}</div>
            </div>
            <div class="bottom">
                <div>{{ formatDate(item.createdAt) }}</div>
            </div>
        </div>
        <el-pagination v-model:current-page="page.pageNum" v-model:page-size="page.pageSize" :page-sizes="[10, 20, 30]"
            :small="small" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>
<script setup>
import { ref, unref } from 'vue'
import { replyMy } from '@/api/personal'
import srcToPath from '@/utils/srcToPath.js'
import formatDate from '@/utils/formatDate'
const page = ref({
    pageNum: 1,
    pageSize: 10,
    total: 1,
})
const commntList =ref([])
const init = async () => {
    const res = await replyMy(unref(page))
    console.log(res);
    commntList.value = res.data.data
    page.value.total = res.data.total
}
const toArticle = (item) => {
    // console.log(window.location.hostname);
    const url = `http://${window.location.host}${window.location.hash.includes('#') ? '/#' : ''}/article/${item.article_id}/${item.comm_id}`; // 替换为你要打开的页面的路径  
    // 将评论存储到本地
    // localStorage.setItem("comment"+item.article_id,JSON.stringify(item))
    window.open(url, '_blank'); // '_blank' 表示在新窗口或新标签页中打开
}

init()
</script>


<style lang="scss" scoped>
.comment-item {
    border-bottom: 1px dashed var(--el-text-color-regular);
    padding: 10px 20px;

    .top {
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;

        :nth-child(1) {
            border-radius: 50%;
        }

        div+div {
            margin-left: 20px;
        }


    }

    .content {
        padding: 20px 0;
    }

    .bottom {
        color: var(--el-text-color-regular);
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>
